<template>
    <div class="newspaper-box">
        <router-link class="img-box" :to="`/ContentDisplay/NewspaperDetail/${newspaperData.id}?f=LocalNewspaper&code=local-newspaper`">
            <img :src="newspaperData.cover" alt=""/>
        </router-link>
        <div class="newspaper-info-box">
            <div class="newspaper-info-item">{{newspaperData.title || '--'}}</div>
            <div class="newspaper-info-item">{{`出版时间：${newspaperData.time.split(' ')[0] || '--'}`}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "NewspaperComponent",
    props:{
        newspaperData:{
            type:Object,
            default(){
                return {}
            }
        }
    },

}
</script>

<style lang="less" scoped>
@import "../../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:33vw;
    @height:60vw;
    .newspaper-box{
        width:@width;
        height:@height;
        .img-box{
            width:@width;
            height:calc(@height - 10vw);
            object-fit: contain;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
            img{
                width:@width;
                height:calc(@height - 10vw);
                object-fit: cover;
                box-shadow: 0 0 2px gray;
            }
        }
        .newspaper-info-box{
            width:@width;
            height:10vw;
            .newspaper-info-item{
                width:@width;
                height:5vw;
                .line-ellipsis(1);
                font-size:3vw;
                line-height: 5vw;
                text-align:center;
                font-weight: bold;
            }

        }

    }
}

//pc
@media only screen and (min-width: 576px){
    .newspaper-box{
        @width:130px;
        @height:260px;
        width:@width;
        height:@height;
        .img-box{
            width:@width;
            height:calc(@height - 40px);
            object-fit: cover;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
            cursor:pointer;
            img{
                width:100%;
                height:calc(@height - 40px);
                object-fit: cover;
                box-shadow: 0 0 2px gray;
            }
        }
        .newspaper-info-box{
            width:@width;
            height:40px;
            .newspaper-info-item{
                width:100%;
                height:20px;
                .line-ellipsis(1);
                font-size:10px;
                line-height: 20px;
                text-align:center;
                font-weight: bold;
            }

        }

    }
}
</style>